<template>
	<div class="kouJibm">
		<el-tabs v-model="activeName" class="demo-tabs" :lazy="true">
			<el-tab-pane label="应用开发前期" name="1">
				<kouJi :message="message" />
			</el-tab-pane>
			<el-tab-pane label="应用开发中期" name="2">
				<div class="top_box">
					<el-form ref="ruleFormRefz" :model="ruleFormz" :rules="rules">
						<div class="zTop">
							<el-form-item label="是否对接三级治理中心" prop="alignedWithThreeLevelCenter">
								<el-select v-model="ruleFormz.alignedWithThreeLevelCenter" placeholder="请选择" style="width: 200px">
									<el-option label="是" :value="'1'" />
									<el-option label="否" :value="'0'" />
								</el-select>
							</el-form-item>
							<div class="tiShi">选择是，需要上传对接材料，选择否则不用</div>
						</div>
						<el-form-item v-if="ruleFormz?.alignedWithThreeLevelCenter == '1' ? true : false" label="上传对接材料" prop="uploadInterfacingMaterials">
							<TsyUploadFile type="submit" :fileType="fileType" :fileSize="200" v-model="ruleFormz.uploadInterfacingMaterials" />
						</el-form-item>
						<div class="bottom_box">
							<el-form-item class="ite" label="应用部署文件" label-width="100px" prop="applicationDeploymentDocument">
								<TsyUploadFile type="submit" :fileType="fileType" :fileSize="200" v-model="ruleFormz.applicationDeploymentDocument" />
							</el-form-item>
							<el-form-item class="ite" label="应用源码" label-width="100px" prop="applicationSourceCode">
								<TsyUploadFile type="submit" :fileType="fileType" :fileSize="200" v-model="ruleFormz.applicationSourceCode" />
							</el-form-item>
							<el-form-item class="ite" label="数据库设计文档" label-width="100px" prop="databaseDesignDocument">
								<TsyUploadFile type="submit" :fileType="fileType" :fileSize="200" v-model="ruleFormz.databaseDesignDocument" />
							</el-form-item>
							<el-form-item class="ite" label="接口文档" label-width="100px" prop="interfaceDocument">
								<TsyUploadFile type="submit" :fileType="fileType" :fileSize="200" v-model="ruleFormz.interfaceDocument" />
							</el-form-item>
						</div>
					</el-form>
					<div></div>
				</div>
			</el-tab-pane>
			<el-tab-pane label="应用开发后期" name="3">
				<div class="top_box">
					<el-form ref="ruleFormRefh" :model="ruleFormz" :rules="rules">
						<div class="bottom_box_w">
							<el-form-item class="ite" label="测试用例" prop="testCases">
								<TsyUploadFile type="submit" :fileType="fileType" :fileSize="200" v-model="ruleFormz.testCases" />
							</el-form-item>
							<el-form-item class="ite" label="测试计划" label-width="100px" prop="testPlan">
								<TsyUploadFile type="submit" :fileType="fileType" :fileSize="200" v-model="ruleFormz.testPlan" />
							</el-form-item>
							<el-form-item class="ite" label="测试报告" label-width="100px" prop="testReport">
								<TsyUploadFile type="submit" :fileType="fileType" :fileSize="200" v-model="ruleFormz.testReport" />
							</el-form-item>
							<el-form-item class="ite" label="联调记录" label-width="100px" prop="jointDebuggingRecord">
								<TsyUploadFile type="submit" :fileType="fileType" :fileSize="200" v-model="ruleFormz.jointDebuggingRecord" />
							</el-form-item>
							<el-form-item class="ite" label="试运行报告" label-width="100px" prop="trialOperationReport">
								<TsyUploadFile type="submit" :fileType="fileType" :fileSize="200" v-model="ruleFormz.trialOperationReport" />
							</el-form-item>
							<el-form-item class="ite" label="数字资源编目信息表" label-width="100px" prop="dataResourceCatalogInfo">
								<TsyUploadFile type="submit" :fileType="fileType" :fileSize="200" v-model="ruleFormz.dataResourceCatalogInfo" />
							</el-form-item>
						</div>
						<div class="zTop">
							<el-form-item label="是否产生重大故障" prop="majorFaultReportAfter">
								<el-select v-model="ruleFormz.majorFaultReportAfter" placeholder="请选择" style="width: 200px">
									<el-option label="是" :value="'1'" />
									<el-option label="否" :value="'0'" />
								</el-select>
							</el-form-item>
							<div class="tiShi"></div>
						</div>
						<el-form-item
							class="ite"
							v-if="ruleFormz.majorFaultReportAfter == '1'"
							label="重大故障情况报告"
							label-width="100px"
							prop="majorFailureReport"
						>
							<TsyUploadFile type="submit" :fileType="fileType" :fileSize="200" v-model="ruleFormz.majorFailureReport" />
						</el-form-item>
					</el-form>
				</div>
			</el-tab-pane>
		</el-tabs>

		<div class="bott_box" v-if="activeName == 2 || activeName == 3">
			<el-button :loading="subLoading" plain class="wihte-button" @click="save">保存</el-button>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { appImplementationSave, getImplementationIntactByCode } from '/@/api/Implementation/addImple';
import TsyUploadFile from '/@/components/HyUpload/index.vue';
import kouJi from './kouJi.vue';
import { toRefs, defineProps, ref, onMounted, nextTick } from 'vue';
import { ElMessage } from 'element-plus';
import { useRoute, useRouter } from 'vue-router';
const router = useRouter();
const handleBack = () => {
	// router.push({
	// 	path: '/digitalImplement/digitalImpDec/index',
	// });
	window.history.length > 1 ? router.go(-2) : router.push('/');
};
const fileType = ref(['.rar', '.zip', '.doc', '.docx', '.pdf', '.jpg', '.jpeg', '.png']);
const props = defineProps({
	message: {
		type: Object,
	},
	appCode: {
		type: String,
	},
	id: {
		type: String,
	},
});
onMounted(() => {
	nextTick(() => {
		// 编辑室获取详情
		getDetail();
	});
});
//编辑时获取详情数据
const getDetail = () => {
	let ids = id?.value;
	if (!appCode) {
		return;
	}
	getImplementationIntactByCode({ id: ids }).then((res) => {
		if (res.code == 0) {
			//判断有无数据
			if (res.data.appCode && res.data.applicationManagementSystem) {
				ruleFormz.value = res.data;
			}
			ruleFormRefz.value.resetFields();
			ruleFormRefh.value.resetFields();
		}
	});
};

const subLoading = ref(false);
const activeName: any = ref('1');
const ruleFormRefz = ref();
const ruleFormRefh = ref();
let ruleFormz = ref({
	appCode: '',
	alignedWithThreeLevelCenter: '',
	uploadInterfacingMaterials: [],
	applicationDeploymentDocument: [],
	applicationSourceCode: [],
	databaseDesignDocument: [],
	interfaceDocument: [],
	majorFaultReportAfter: '',
	testCases: [],
	testPlan: [],
	testReport: [],
	jointDebuggingRecord: [],
	trialOperationReport: [],
	dataResourceCatalogInfo: [],
	majorFailureReport: [],
});
const rules = reactive({
	alignedWithThreeLevelCenter: [{ required: true, message: '请选择', trigger: 'change' }],
	uploadInterfacingMaterials: [{ required: true, message: '请选择', trigger: 'change' }],
	applicationDeploymentDocument: [{ required: true, message: '请选择', trigger: 'change' }],
	applicationSourceCode: [{ required: true, message: '请选择', trigger: 'change' }],
	databaseDesignDocument: [{ required: true, message: '请选择', trigger: 'change' }],
	interfaceDocument: [{ required: true, message: '请选择', trigger: 'change' }],
	majorFaultReportAfter: [{ required: true, message: '请选择', trigger: 'change' }],
	testCases: [{ required: true, message: '请选择', trigger: 'change' }],
	testPlan: [{ required: true, message: '请选择', trigger: 'change' }],
	testReport: [{ required: true, message: '请选择', trigger: 'change' }],
	jointDebuggingRecord: [{ required: true, message: '请选择', trigger: 'change' }],
	trialOperationReport: [{ required: true, message: '请选择', trigger: 'change' }],
	dataResourceCatalogInfo: [{ required: true, message: '请选择', trigger: 'change' }],
	majorFailureReport: [{ required: true, message: '请选择', trigger: 'change' }],
});

//保存
const save = async () => {
	let Code = appCode?.value;
	let data: any = { ...ruleFormz.value };

	data.appCode = Code;
	console.log(data, 123123);

	// appImplementationSave(data).then((res) => {
	// 	if (res.code == 0) {
	// 		//保存成功
	// 		handleBack();
	// 	}
	// });

	try {
		const ruleFormRefA = await ruleFormRefz.value.validate();
		const ruleFormRefB = await ruleFormRefh.value.validate();
		if (ruleFormRefA && ruleFormRefB) {
			subLoading.value = true;
			appImplementationSave(data).then((res) => {
				if (res.code == 0) {
					//保存成功
					handleBack();
					subLoading.value = false;
				}
			});
		}
	} catch (error) {
		ElMessage.error('请完整上传中后期资料');
	}
};

//文件

const { message, appCode, id } = toRefs(props);
</script>

<style lang="scss" scoped>
.kouJibm {
	background-color: #ffffff;
	padding: 10px;
	.top_box {
		.top_item {
			.title_item {
				font-size: 15px;
				font-weight: 600;
				margin-bottom: 5px;
			}
			.longRever {
				width: 100%;
				display: flex;
				flex-wrap: wrap;

				.item_box {
					width: 30%;
					margin: 5px 0px;
					display: flex;
					flex-wrap: wrap;

					.item_name {
						color: #999999;
						width: 60px;
					}
				}
				.item_box_w {
					width: 100%;
					margin: 5px 0px;
					display: flex;
					// flex-wrap: wrap;

					.item_name {
						color: #999999;
						width: 60px;
					}

					.table {
						flex: 1;
					}
				}
			}
		}

		.zTop {
			display: flex;
			.tiShi {
				margin-left: 5px;
				margin-top: 3px;
				color: red;
			}
		}
		.bottom_box {
			display: flex;
			flex-wrap: wrap;
			.ite {
				width: 45%;
				margin-right: 10px;
			}
			:deep(.el-form-item) {
				align-items: flex-start !important;
			}
		}
		.bottom_box_w {
			display: flex;
			flex-wrap: wrap;
			.ite {
				width: 45%;
				margin-right: 10px;
			}
			:deep(.el-form-item) {
				align-items: flex-start !important;
			}
		}
	}

	.data_ying {
		:deep(.el-card) {
			border: 0px;
		}

		:deep(.el-card:hover) {
			box-shadow: 0 0 0px 0px;
		}
		:deep(.el-card__header) {
			background-color: #ffffff;
		}
	}
	.bott_box {
		position: absolute;
		left: 0px;
		bottom: 0px;
		margin-top: 10px;
		width: 100%;
		padding: 10px 0;
		text-align: center;
		box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
		flex-grow: 0;
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
	}
}
</style>
